<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Easy Tickets</title>
        <link href="../resources/css/styles.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="../resources/css/screen.css" type="text/css" media="screen" title="default" />
        <script type="text/javascript" src="../resources/js/jquery.js"></script>
        <script type="text/javascript" src="../resources/js/easySlider1.5.js"></script>
        <script type="text/javascript" charset="utf-8">
        // <![CDATA[
        $(document).ready(function(){
                $("#slider").easySlider({
                        controlsBefore:	'<p id="controls">',
                        controlsAfter:	'</p>',
                        auto: true,
                        continuous: true
                });
        });
        // ]]>
        </script>
        <style type="text/css">
            .gallery { width:913px; height:285px; margin:0 auto; }
            #slider { margin:0; padding:0; list-style:none; }
            #slider ul,
            #slider li { margin:0; padding:0; list-style:none; }
            /*
                define width and height of list item (slide)
                entire slider area will adjust according to the parameters provided here
            */
            #slider li { width:913px; height:285px; overflow:hidden; }
            p#controls { margin:0; padding:0; position:relative; }
            #prevBtn { display:block; margin:0; overflow:hidden; width:40px; height:40px; position:absolute; left:-25px; top:-150px; }
            #nextBtn { display:block; margin:0; overflow:hidden; width:40px; height:40px; position:absolute; left: 900px; top:-150px; }
            #prevBtn a { display:block; width:40px; height:40px; background:url(../resources/images/User/l_arrow.gif) no-repeat 0 0; }
            #nextBtn a { display:block; width:40px; height:40px; background:url(../resources/images/User/r_arrow.gif) no-repeat 0 0; }
        </style>
    </h:head>

    <h:body >

        <f:view>
            <h:form>
                <div id="top">

                    <ui:insert name="top">
                        <div class="container">
                            <div class="container_h1">
                                <div class="header1"> <a href="indexs.xhtml"><img src="../resources/images/User/logo_easy.png" alt="logo" width="340" height="88" border="0" /></a>
                                    <div class="header1sub">

                                        <h:commandLink value="Login" action="LoginUser">
                                            <p:graphicImage width="50" height="20" value="..\resources\images\login\login.png"/>
                                        </h:commandLink>

                                        <h:commandLink  action="Home" actionListener="#{customerBean.logout}">
                                            <p:graphicImage width="50" height="20" value="..\resources\images\login\logout.png"/>
                                        </h:commandLink>

                                    </div>
                                    <div class="clr"></div>
                                </div>
                            </div>
                            <div class="container_m">
                                <div class="menu">
                                    <ul>
                                        <li><a href="Home.xhtml" class="active"><span>Home</span></a></li>
                                        <li><a href="Music.xhtml"><span>Music</span></a></li>
                                        <li><a href="Movies.xhtml"><span>Movies</span></a></li>
                                        <li><a href="Sports.xhtml"><span>Sports</span></a></li>
                                        <li><a href="About.xhtml"><span>About Us</span></a></li>
                                        <li><a href="Contact.xhtml"><span>Contact</span></a></li>

                                    </ul>
                                    <div class="search">

                                        <ul>
                                            <li><b>Search:</b></li>
                                            <li><p:inputText  styleClass="keywords" id="textfield" value="#{searchBean.key}" maxlength="50"/></li>

                                            <li><h:commandButton action="Search" actionListener="#{searchBean.searchListEvent}" image="../resources/images/User/search_btn.gif" styleClass="button" type="image" >
                                                    <f:param name="textfield" value="#{searchBean.key}"/>
                                                </h:commandButton></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="slider_top">
                                <div class="header_text">
                                    <div class="gallery">
                                        <div id="slider">
                                            <ul>
                                                <li>
                                                    <div class="div"> <img src="../resources/images/User/simple_img_1.jpg" alt="screen 1" width="603" height="262" border="0" class="screen"  />
                                                        <div class="left1">
                                                            <h2>Movies
                                                            </h2>


                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="div"> <img src="../resources/images/User/simple_img_2.jpg" alt="screen 1" width="603" height="262" border="0" class="screen"  />
                                                        <div class="left1">
                                                            <h2>Sports</h2>

                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="div"> <img src="../resources/images/User/simple_img_3.jpg" alt="screen 1" width="603" height="262" border="0" class="screen"  />
                                                        <div class="left1">
                                                            <h2>Films</h2>

                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="clr"></div>
                                </div>
                            </div>

                            <div class="container_f1">
                                <div class="footer1">
                                    <div class="clr"></div>
                                </div>
                            </div>

                        </div>
                    </ui:insert>

                </div>

                <div id="content" class="center_content">
                    <div class="container_c">
                        <div class="header_text">
                            <ui:insert name="content">

                            </ui:insert>
                        </div>
                    </div>
                </div>

                <div id="bottom">
                    <ui:insert name="bottom">
                        <div class="container_f2">
                            <div class="footer2">
                                <div class="footer2left">
                                    <p><b>FPT-APTECH _FAT2 GROUP2 </b></p>
                                    <ul>
                                        <li><a href="Home.xhtml">Home</a></li>
                                        <li><a href="contact.xhtml">Contact</a></li>
                                        <li><a href="#">RSS</a></li>
                                    </ul>
                                </div>
                                <div class="footer2right">
                                    <p class="footer"><b>EASYTICKETS.COM</b></p>
                                </div>
                                <div class="clr"></div>
                            </div>
                        </div>
                    </ui:insert>
                </div>
            </h:form>
        </f:view>
    </h:body>

</html>
